<template>
    <view class="view-com">
        <video id="myVideo" class="myVideo" :src="src" @ended="handleEnd" :controls='controls' @error="handleError"
            @timeupdate='handleTimeupdate'>
            <cover-view class="box">
                <cover-view class="vip-info" v-if="playState == 'play-video' && qisim.is_vip == 1">
                    <cover-view class="free-time">{{weliDuration}}</cover-view>
                    <cover-view class="icon"></cover-view>
                    <cover-view @click="ulinix" class="buy-vip-button">ئالاھىدە ئەزا بولىمەن</cover-view>
                    <cover-view class="icon"></cover-view>
                    <cover-view @click="gopirce" class="buy-vip-button">ئايرىم سېتىۋېلىش</cover-view>
                </cover-view>
                <cover-view class="vip-tip" v-if="playState == 'play-ad'">ئالاھىدە ئەزالار
                    ئېلانسىز كۆرەلەيدۇ</cover-view>
                <cover-view class="count-down" v-if="playState == 'play-ad'">{{countDownNum}} سېكونت</cover-view>
                <cover-view class="vip-tv" @click="tv" v-if="userInfo.vip_time==0">
                    <cover-image class="img" mode="widthFix" src="/static/img/viptv/TV.svg"></cover-image>
                </cover-view>
            </cover-view>
        </video>
    </view>
</template>

<script>
    import {
        weliTransTime,
        weliSecondTime
    } from '@/scripts/helpers/date.js'
    export default {
        props: {
            // 视频正片
            qisim: {
                type: Object,
                require: true,
            },
            // 视频广告
            adPlayer: {
                type: Object,
                require: true,
            },
            // 视频状态
            playState: {
                type: String,
                require: true,
            },
            // 用户信息
            userInfo: {
                type: Object,
                require: true,
            },
        },
        data() {
            return {
                // 视频控件属性
                src: null,
                controls: false,

                // 视频控件节点
                myVideoContext: null,

                // 免费观看 剩余时间提示		
                weliDuration: "05:00",

                // 充值会员弹窗
                vipAlert: false,

                // 倒计时
                countDownNum: 0,
            }
        },
        mounted() {
            this.myVideoContext_init()
            this.playState_init()
        },
        methods: {
            playState_init() {
                this.$watch('playState', (playState) => {
                    // 视频控件使用状态
                    // 1.loading 加载视频资源
                    // 2.play-ad 播放视频广告
                    // 3.play-video 播放视频正片
                    switch (playState) {
                        case 'loading':

                            break;
                        case 'play-ad':
                            this.controls = false
                            this.src = this.adPlayer.ad_video
                            this.$nextTick(() => {
                                this.myVideoContext.play()
                            })
                            break;
                        case 'play-video':
                            this.controls = true
                            this.src = this.qisim.url
                            this.$nextTick(() => {
                                this.myVideoContext.play()
                            })
                            break;
                        default:
                            uni.showToast({
                                title: 'playState error!',
                                icon: 'error'
                            })
                            break;
                    }
                }, {
                    // immediate: true,
                    deep: true
                })
            },
            handleTimeupdate(e) {
                if (this.playState == 'play-ad') {
                    this.playAd_handleTimeupdate(e)
                }
                if (this.playState == 'play-video') {
                    this.playVideo_handleTimeupdate(e)
                }
            },
            playAd_handleTimeupdate(e) {
                if (e.detail.currentTime <= this.adPlayer.time) {
                    this.countDownNum = weliSecondTime(this.adPlayer.time - e.detail.currentTime)
                }
            },
            playVideo_handleTimeupdate(e) {
                if (e.detail.currentTime <= 300) {
                    const remainingTime = 300 - e.detail.currentTime
                    this.weliDuration = weliTransTime(remainingTime)
                    if (remainingTime <= 295 && this.qisim.is_vip == 1 && this.userInfo.vip_time == 0) {
                        this.controls = false
                        this.myVideoContext.pause()
                        this.myVideoContext.exitFullScreen()
                        this.vipAlert = true
                    }
                }
            },
            handleError(e) {
                uni.showModal({
                    content: 'سىن كۆرۈنۈشىدە خاتالىق كۆرۈلدى ،باشقۇرۇش بىلەن ئالاقىلىشىڭ ',
                    showCancel: false
                })
            },
            myVideoContext_init() {
                this.myVideoContext = uni.createVideoContext('myVideo', this)
                // console.log(this.myVideoContext);
            },
            handleEnd() {
                if (this.src == this.adPlayer.ad_video) {
                    this.$nextTick(() => {
                        this.$emit('setPlayState', 'play-video')
                    })
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .view-com {
        height: 210px;
        width: 100%;
        background-color: #f0f0f0;

        .myVideo {
            height: 210px;
            width: 100%;
            position: relative;
        }

        .vip-tv {
            position: absolute;
            right: 10px;
            top: 20px;
            height: 24px;
            width: 24px;

            .img {
                display: block;
                width: 100%;
            }
        }

        .count-down {
            font-size: 14px;
            background-color: rgba(0, 0, 0, .8);
            color: #fff;
            direction: rtl;
            width: max-content;
            height: 24px;
            line-height: 24px;
            font-family: UKIJ Tor;
            position: absolute;
            top: 20px;
            left: 10px;
            border-radius: 12px;
            padding: 0 15px;
        }

        .vip-tip {
            position: absolute;
            left: 10px;
            top: 54px;
            margin: auto;
            width: max-content;
            background-color: rgba(255, 170, 102, .2);
            color: #fa6;
            padding: 0 10px;
            font-size: 12px;
            height: 24px;
            line-height: 24px;
            direction: rtl;
            font-family: UKIJ Tor;
            border-radius: 12px;
        }

        .vip-info {
            height: 24px;
            line-height: 24px;
            color: rgb(0, 247, 255);
            background-color: rgba(255, 255, 255, 0.2);
            padding: 0 10px;
            border-radius: 12px;
            position: absolute;
            bottom: 40px;
            left: 10px;
            font-size: 12px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;

            .icon {
                width: 1px;
                height: 10px;
                background-color: rgba(0, 225, 255, 0.5);
                margin: 0 10px;
            }

        }

    }
</style>